<template>
  <div class="tab">
      <ul class="list">
        <li v-for="item in list" :key="item.id" :class="aaa===item.id?'list-active':''" @click="dj(item)">{{item.name}}</li>
      </ul>
      <ul class="content">
        <li v-for="item in list1" :key="item.id" :class="aaa===item.id?'content-active':''" @click="dj1(item)">{{item.name}}</li>
      </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [
        { id: 1, name: '苹果' },
        { id: 2, name: '香蕉' },
        { id: 3, name: '橘子' }
      ],
      list1: [
        { id: 1, name: 'apple' },
        { id: 2, name: 'banana' },
        { id: 3, name: 'orange' }
      ],
      aaa: '',
      bbb: ''
    }
  },
  created () {
    this.aaa = this.list[0].id
    // this.bbb = this.list[0].id
  },
  methods: {
    dj (item, index) {
      // 点击的时候让
      this.list.forEach(x => {
        if (x.name === item.name) {
          this.aaa = item.id
        }
      })
    },
    dj1 (item, index) {
      // 点击的时候让
      this.list.forEach(x => {
        if (x.name === item.name) {
          this.aaa = item.id
        }
      })
    }
  }
}
</script>

<style>
    .tab{
        display: flex;
    }
    .content li{
        width: 200px;
        height: 200px;
        background-color: skyblue;
        display: none;
    }
    .list-active{
        color: red;
    }
    li.content-active{
        display: block;
    }
</style>
